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Apresentagao 



Neste livro iremos focar nos topicos iniciais da linguagem JavaScript, sendo este um guia ideal para 
quem esta iniciando no desenvolvimento web, e tambem para quern ja possui algum conhecimento 
mas pretende estudar com base em algum material mais aprofundado e com varios exercicios 
praticos, consolidando assim o que ja sabe e aprendendo coisas novas. 

Apos cada etapa teorica, irei apresentar exemplos e exercicios para fixagao de todo o conteudo, 
e apos uma parte significativa dos estudos, iremos criar projetos para total entendimento pratico 
de como aplicar essas informagoes. Os exercicios e projetos serao resolvidos e contarao com uma 
detalhada explicagao, para total entendimento por parte do leitor. 

Outro ponto importante e que comprometo-me a ser o mais pratico possivel. Sim, teoria e otimo e 
nos da muita base, mas iremos ficar tambem bastante tempo no console 1 testando e aplicando nossos 
codigos. 

Para seu aprendizado ser consolidado, e a informagao contida neste livro se transformar em seu 
conhecimento, e extremamente necessario que voce pratique todos os codigos aqui presentes, e 
continue a leitura apenas quando tiver um entendimento minimo do que eles estao fazendo. 

Em caso de duvidas sobre os temas apresentados, voce pode compartilha-las nos grupos JavaScript 


'https^/www.codeschool.com/courses/discover-devtools 
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Brasil 2 e impJS 3 . Apenas nao deixe duvidas acumularem. Irei tentar lhe ajudar da melhor maneira 
possivel! 

Alem disso, voce pode ficar por dentro das novidades do blog, novos livros/projetos e muito mais 
sobre o universo JavaScript assinando a minha newsletter 4 . Prometo que so tera links e assuntos 
uteis relacionados ao universo do JavaScript! Nada de spam! 

Motivagao para este trabalho 

Tenho uma enorme satisfagao em poder compartilhar conhecimento, e fago isso de forma mais 
empenhada ainda quando se trata de JavaScript! 

Sendo assim, para que este conhecimento nao fique restrito apenas para quern pode pagar, mas esteja 
disponivel para todos que, de fato, queiram aprender, decidi criar este material e disponibiliza-lo de 
forma gratuita no meu blog 5 . 

Realmente e um prazer imenso poder fazer parte desta comunidade de desenvolvedores, e esse livro 
(e os proximos) serao uma pequena retribuigao, um agradecimento a tudo o que ja aprendi atraves 
dela. 

Bom, se tenho o livro de graga, por que pagar? 

E fato que o trabalho de se escrever um livro consome muito tempo e exige uma grande dedicagao. 

A compilagao deste trabalho em formato de livro tern como objetivo experimentar uma nova forma 
de compartilhar conhecimento, onde irei presentea-lo com o melhor conteudo que me for possivel 
criar, e caso voce fique satisfeito com este, voce tambem podera me presentar com sua colaboragao. 

Alem dessa forma de “negociarmos” atraves de presentes, estou iniciando uma metodologia propria 
de divisao do conteudo a ser ensinado de forma modular. Irei te explicar melhor isso no poximo 
capitulo. 

Tendo este formato obtido exito, ja tenho em mente outros temas para novas series furtivas. Se voce 
esta curioso em saber quais sao estes possiveis temas, irei lhe contar. 


Proximos Temas 

• NodeJS 

• Meteor 

• Express 


2 https://www.facebook.com/groups/javascriptbrasil/ 

3 https://www.facebook.com/groups/impJS/ 

4 http://eepurI.com/TpAmv 

5 http://ericdouglas.github.io/2014/04/08/10-javascript-furtivo-apresentacao/ 
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• AngularJS 

• MongoDB (e bancos de dados NoSQL) 

• MEAN 

• e tambem a combinagao Jade e Stylus. 

Conclusao 

O objetivo desta serie e ser uma referenda de material de alta qualidade sobre JavaScript, levando 
o melhor do mundo teorico e pratico para voce. 

Os grandes diferenciais sao o conteudo sintetizado e claro, levando o leitor direto aos pontos chaves 
da linguagem, e os diversos exercicios e projetos praticos resolvidos e comentados, que fecham o 
ciclo do conhecimento e dominio real dos assuntos abordados. 

“A fortaleza intima do homem e a sua sinceridade de propositos. Enquanto arvores 
colossais nenhum fruto produzem, outras pequenas arvores cobrem-se de belos pomos.” 



Livros Modulares 



Continuando as inovagoes na forma de se apresentar conteudo tecnico, irei implementar um sistema 
onde o leitor podera montar o seu proprio livro, de acordo com sua vontade/necessidade. 


© 


Como assim? Ainda nao entendi! 


Simples! Os livros serao dividos por areas e paradigmas da linguagem. Este primeiro livro JavaScript 
Furtivo, ira abordar a estrutura (sintaxe) basica da linguagem e a parte logica utilizada em suas 
expressoes/instrugoes. 

Os proximos livros abordarao fungoes, objetos, arrays e demais assuntos especificos da linguagem, 
tendo cada um a devida profundidade no tema. 

Porem, para que voce nao fique defasado em relagao a estes outros assuntos, no final deste livro 
estara presente uma lista de recursos para voce continuar por conta propria estudando estes temas, 
a unica diferenga e que a explicagao dos mesmos ficara para futuras publicagoes (que sairao em 
breve). 


Livros Modulares 
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Mas o que eu, leitor, ganho com isso? 

LiberdadeH! 

Acompanhe comigo a seguite situagao: 

Imagine uma pessoa que ja tem experiencia com desenvolvimento JavaScript, estudou seus principios 
basicos e tem um bom entendimento do paradigma orientado a objetos, mas tem muita vontade de 
aprender mais sobre programaqao funcional, e gostou do conteudo apresentado nesta serie, atraves 
do meu blog, e gostaria de adquirir o livro para poder estudar atraves dos exercicios e projetos. 

Imaginou isso? Legal! Agora vamos continuar, se ele ja sabe a maior parte e quer apenas aprofundar 
em fungdes, se o material for disponibilizado de forma unica, ele tera que pagar por todo o livro, 
porem, se o mesmo estiver modularizado (dividido), ele podera adquirir apenas a parte que lhe 
interessa. Justo! 

Entao, com essa visao que inicio essa nova maneira de dispor conteudo, permitindo que o mesmo 
seja adquirido de forma independente. 

Outro ponto importante nessa abordagem e que assim teremos mais liberdade para aprofundar em 
cada tema em especifico, elevando e muito nosso conhecimento e dominio nos temas. 



Depoimentos 



Aqui voce pode encontrar algumas opinioes dos leitores do blog sobre o conteudo deste livro 
JavaScript Furtivo! 

Show a comunidade precisava de um projeto desses! 

• Suissa 

Curti muito a iniciativa! Sucesso, cara! =D 

• Leonardo Alberto Souza 
Ta cada dia melhor!!! 

• Valdiney Franga 
Parabens cara perseveranga. 

• Osmar Cs 


Ta muito da hora 


Depoimentos 
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• Luiz Henrique 
Muito Bom! Show! 

• Falconiere Rodrigues Barbosa 
Perfect! 

• Jonathan Brunno 
Muito legal! 

• Deise Dall’Agnol 
Muito bom! 

• Robson Bittencourt 
Muito bom! 

• Marcio Carvalho 

Otimo! Bom saber que existem pessoas escrevendo artigos de JS em portugues 

• Luis Fontes 

Muito bom artigo e bem explicado. 

• Andre Luiz 

Boa Eric. Tenho acompanhado desde a primeira parte e esta sendo bem proveitoso pra 
mim. Finalmente vou aprender JS, xD. 

• Euclides Fernandes 
Muito bom! 

• Raphael Fabeni 

Estava realmente precisando, bem legal os artigos. parabens! 

• Jefferson Daniel 
Show de bola hein! 


• Flavio 



Depoimentos 


Post muito bom Eric parabens cara!! 

• Rafael Antonio Lucio 
Parabens Eric! 

• gustavoSRodrigues 

Muito bom! parabens mesmo Xara rs 

• Erick 

Isso ai Eric! Episodios de alta qualidade... parabens pelo otimo trabalho!! 

• Guilherme Decampo 
Sou fa desse Eric 

• Palmer 

Muito obrigado. Como sempre, excelentes conteudos. Abrago. 

• Denis Toledo 
Nice post man! +1 


• Caio Ribeiro Pereira 



Sobre a Capa 



A capa do nosso livro nao foi criada apenas com fins esteticos, mas tern ali representada a sintese de 
todo o trabalho e ideologia que sera encontrado neste livro e no projeto em si. 

Foguete 



Foguete 


O Voce sabia que um foguete consome mais de 80% do seu combustivel apenas para ser 
langado? 


Sobre a Caps 
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Exatamente, e um gasto absurdo de energia apenas para tira-lo do chao... Mas nao e sobre foguetes 
que quero falar aqui, mas sim sobre dedicagao e, principalmente habito. 

Criar um (bom) habito pode ser perfeitamente comparado com o langamento de um foguete. No 
inicio, temos que lutar, nos esforgar muito para conseguir apenas sair do chao, mas depois que 
conseguimos superar essa barreira inicial, o voo se da de forma fluida. 

Antes de tentar aprender sobre qualquer coisa, tenha em mente a certeza que voce so conseguira 
obter bons resultados se voce cultivar bons habitos relacionados a tal tarefa. 

Cultive bons habitos!, e elimine os maus... 

Experimentos 


A 


Experimentos 

Nosso livro estara recheado de exemplos, exercicios e projetos. 

• Usaremos os exemplos para explicar trechos curtos da teoria, atraves de pequenos codigos 
que tern o papel de deixar visual e mais “palpavel” este primeiro contato com um determinado 
assunto. 

• Os exercicios estarao contidos no fim dos capitulos, e tern o objetivo de verificar se voce 
realmente aprendeu os assuntos em questao. Vale ressaltar que alem dos exercicios, no fim do 
livro estarao todas as resolugoes dos mesmos, para auxilia-lo quando necessario, e tambem 
a explicagao detalhada de como o exercicio foi resolvido. 

ps: Olhe a resolugao somente apos tentar resolver os exercicios por varias vezes, pois isso e essencial 
para seu aprendizado. O importante nao e voce resolver exercicio X ou Y, mas sim entender o que 
esta acontecendo ali. 


• Os projetos serao o ponto maximo dos nossos estudos, onde iremos juntar o conteudo de 
alguns capitulos para criar aplicagoes reais, tendo com elas uma experiencia pratica de um 
verdadeiro desenvolvedor JavaScript! 


Sobre a Caps 
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Importante! 

Nao irei passar nenhum exercicio/projeto que exija mais do que tenha sido explicado, pode confiar! 
Os exercicios serao exatamente do mesmo nivel do que ja tenha sido ensinado. Eventuais duvidas 
estarao ligadas mais em relagao a logica empregada, e isso e algo muito pessoal pois cada um visualiza 
o problema de uma forma. 

No entanto, nao se preocupe com acertar ou nao. Se esforce para resolver o problema, pois caso nao 
consiga obter exito inicial em algum problema, quando voce verificar a resposta, essa sera muito 
melhor aproveitada e absorvida do que se voce tivesse a visto sem esforgo previo. 


Terno e Gravata 



Terno e gravata 


Essa ilustragao, por fim, tern o objetivo de nos dizer que, ao termino destes estudos, estaremos 
aptos a ser considerados verdadeiros desenvolvedores JavaScript com um solido conhecimento da 
linguagem, e prontos para atuar e contribuir nao somente com a comunidade de desenvolvedores, 
mas com o mundo todo, criando aplicagoes de alto nivel, e implementando ferramentas que irao nos 
ajudar no nosso dia a dia! 


Duvidas e Consideragdes 



Caso voce tenha alguma duvida ou consideragao a fazer sobre o material aqui apresentado, alem 
dos locais mensionados no capitulo Apresentagao, voce tambem podera utilizar este grupo 6 para se 
comunicar comigo e com os demais leitores do livro. 


6 https://groups.google.com/forum/#!forum/javascript-furtivo 



Prefacio 



Agora que voce esta ciente de como ira funcionar essa nova proposta de compartilhamento de 
conteudo, podemos iniciar nossa jornada rumo a maestria no JavaScript. 

Neste livro voce ira aprender toda a estrutura (sintaxe) basica da linguagem e sua estrutura logica. 
Irei te mostrar como nomear suas variaveis, como criar dados, como usar os operadores que a 
linguagem nos fornece para criar programas de logica, e no ultimo capitulo sera introduzido um 
topico avangado com dicas de otimizagao para estes processos. 

Fazendo uma comparagao com a nossa linguagem falada, iremos aprender como criar palavras, 
frases e textos simples, mas de forma eficaz, construindo uma base solida para o aprofundamento 
nos temas futuros. 

Alem disso, para cada capitulo do livro voce tera uma lista de exercicios correspondente, e tambem 
a resolugao detalhada de cada exercicio, com explicagoes minunciosas, passo a passo, para que voce 
possa entender verdadeiramente TUDO que esta sendo feito. 

E para fechar nosso ciclo de aprendizagem, teremos um projeto que ira englobar todos os assuntos 
abordados no livro, para consolidar nosso conhecimento. 

Tenha uma otima leitura! Vamos comegar... =) 


Ola JavaScript! 



Antes de iniciarmos as apresentagoes, vou lhe contar algo que voce devera tomar cuidado ao 
compartilhar, pois pode lhe gerar algumas discussoes, mas o fato e que o mercado nunca foi tao 
interessante e animador para um programador JavaScript como agora, e nunca foi tao onipresente 
para qualquer linguagem como esta sendo para o JavaScript! 

Serio, hoje podemos fazer maravilhas com o JavaScript, desde programagao front-end (no lado do 
cliente [navegador]), como no back-end com o espetacular Node.JS, que alem disso permitiu que o 
JavaScript fosse utilizado em diversas outras areas alem dos navegadores e mundo web. 

O trio HTML, CSS e JavaScript esta cada vez mais presente nos celulares, seja como aplicagoes 
hibridas ou ate mesmo como o proprio sistema operacional, tendo como exemplo o Firefox OS. 

Para mais motivagao para aprender JavaScript, veja este 7 link. 


7 http://ericdouglas.github.io/2014/02/17/01-bushido-dev-web/ 
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O que e JavaScript? 

Vamos fazer uma analogia de uma aplicagao web, seja um simples site ou um complexo sistema, 
com uma casa. 

Na casa, toda a parte estrutural (tijolos, telhado) e equivalente ao HTML. Ele e responsavel por 
estruturar e definir, semanticamente, quais elementos estarao presentes no nosso documento (outro 
nome para nossa pagina HTML). E muito importante ter em mente exatamente o que cada 
tecnologia nos oferece, para aproveitarmos o melhor de cada, e nao delegar tarefas de uma para 
a outra. 

O CSS e responsavel de fazer o acabamento da casa, digo, da aplicagao. E a parte que devemos 
“estilizar” todo o documento, para que o mesmo nao fique com cara de apenas um documento para 
impressao, mas sim com a cara de uma aplicagao/programa o mais agradavel e utilizavel possivel. 

OBS: Tanto e verdade sobre a questao do HTML ser um documento, que sua origem foi justamente 
essa. A WWW (World Wide Web) foi criada com fim de auxiliar pesquisadores a mandarem seus 
trabalhos academicos uns para os outros. O HTML (HyperText Markup** Language, ou linguagem 
de marcagao de hipertexto) foi a linguagem criada para identificagao do navegador de onde se teria 
um titulo, um paragrafo, uma citagao, e por ai vai... O que vemos hoje com o HTML5 e um sonho 
utopico, analisando o cenario atual com a mentalidade de quando esta tecnologia (HTML) fora 
criada. 

Por ultimo, e nao menos importante, temos o JavaScript! Em relagao a uma casa, a fungao do 
JavaScript seria dar “vida” a casa, ou seja, seria a luz e a agua da mesma, por exemplo. De forma 
menos ludica, de fato o JavaScript cuida das interagoes da pagina com o usuario, e vice-versa. 

A fungao primaria para qual o JavaScript foi criada era a de tratar informagoes do lado do cliente, 
sem que fosse necessario o envio de informagoes para processamento no servidor. Vale mais uma 
vez ressaltar a importancia da base historica para real compreensao e valorizagao das tecnologias, 
ferramentas que nos auxiliam a realizar determinada tarefa. 

Hoje em dia, o acesso a internet se faz em grande parte utilizando servigos de banda larga. Bom, 
atualmente e assim! No inicio da nossa querida web, voce poderia levar tranquilamente 1 minuto 
apenas para receber uma mensagem que seu formulario foi preenchido incorretamente... 

Isso e so o comego, teremos uma longa caminhada para desvendar os segredos dessa linguagem 
fantastica que nos permite criar diversas coisas, tantas quanto nossa imaginagao permitir! 

Chega de conversa, vamos aprender Java!!! 

Meu amigo, de coragao, nunca diga Java referindo-se a nossa querida linguagem JavaScript. Nunca!!! 
Este nome, infelizmente, foi uma terrivel escolha de marketing feita no inicio da historia do 
JavaScript. Como a linguagem Java estava muito em alta na epoca em que o JavaScript foi criado, 
resolveram nomear a linguagem de tal forma. Essa e a maior semelhanga que Java e JavaScript tern. 
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JavaScript™ 

Nossa linguagem foi criada por Brendan Eich em 1995 quando o mesmo trabalhava na Netscape (hoje 
Mozilla ). Ja teve o nome de Mocha e LiveScript, porem quando foi apresentada a implementagao de 
Java nos navegadores da Netscape em conjunto com a Sun Microsystems (hoje Oracle), teve seu 
nome alterado para JavaScript. Este nome, JavaScript, e marca registrada da Oracle atualmente. 

Quando o JavaScript foi padronizado pelo grupo ECMA (European Computer Manufacter’s Associ¬ 
ation), recebeu o nome de ECMAScript, e temos entao essa versao padronizada implementada nos 
navegadores. 

Ja na ECMAScript temos que ter atengao atualmente a tres de suas versoes. A primeira e a versao 3 
(ECMAScript 3), que e completamente suportada por todos os navegadores atuais. A segunda versao 
e a 5 (ECMAScript 5) que esta em grande parte implementada, mas iremos analisar quando alguma 
feature (propriedade, recurso) da mesma nao for comum entre os navegadores. A versao 5 e a que 
iremos abordar principalmente nessa serie. E a proxima versao e a 6 (ECMAScript 6), que devera 
ser langada em breve. Preocupe-se hoje com a 3 e 5, a 6 e bom, no presente momento, apenas ter 
conhecimento de que esta para chegar. =) 

• Mais sobre o inicio da JavaScript aqui 8 ; 


s http://pt.wiMpedia.org/wiki/JavaScript 



Conhecendo o Idioma JavaScript 



Para voce comegar estudar a linguagem de programagao JavaScript, e necessario que tenha o 
entendimento de como se da esse intercambio dos caracteres que inserimos com a forma que os 
mesmos sao interpretados pelo computador. Muito dificil? Vamos simplificar! 

E algo bem simples, voce se comunica com outras pessoas atraves de uma linguagem, a qual nada 
mais e que uma padronizagao de sequencias de letras e fonemas que juntos referem-se a alguma 
coisa e dao sentido a tal. Na area da programagao e exatamente a mesma coisa! Temos que conhecer 
as estruturas basicas da linguagem para comegarmos a montar palavras, frases e textos, que no nosso 
caso serao os programas. 

Essa estrutura de comunicagao basica, ou estrutura lexica, nos indica como a linguagem deve ser 
escrita, sendo essa estrutura o nivel mais baixo de abstragao, nos indicando como criar e nomear 
variaveis, como inserir comentarios nos codigos e como escrever as expressdes e instrugdes que 
farao toda a magica acontecer. 

Agora que ja temos em mente o que precisamos aprender, vamos, entao, aprender! 

Nesse capitulo voce ira aprender: 

1. Qual o padrao de escrita usado no JavaScript; 

2. Detalhes de nomenclatura; 
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3. Como inserir comentarios 

4. Como nomear variaveis; 

5. O que sao identificadores e palavras-reservadas. 




Leia sempre com bastante atengao cada tema passado e reflita-o um pouco para iniciar a 
absorgao das informagoes. Todo o conteudo deste livro e de suma importancia para seu 
aprendizado e crescimento como desenvolvedor JavaScript, porem, nao pense que voce 
tera que aprender tudo na primeira vez que ler e/ou praticar. 


O aprendizado e algo que leva tempo e muito esforgo repetitivo, e muitas coisas nao sao 
triviais, e e isso que no final fara toda a diferenga e dara a sua satisfagao em ter vencido 
cada etapa do processo. =) 


As "Letras" do Nosso Alfabeto 

Nosso codigo JavaScript e escrito com base no padrao Unicode, que podemos sucintamente definir 
como um padrao que permite aos computadores representar e manipular, de forma consistente, texto 
de qualquer sistema de escrita existente. Este e composto com mais de 107 mil caracteres! 

JavaScript nao e JAVASCRIPT nem javascript! 

A linguagem JavaScript faz diferenciagao de letras maiusculas de letras minusculas, portanto, todo 
o devido cuidado deve ser tornado para evitar discordancias na chamada de fungoes e todas as 
propriedades proprias do JavaScript e outras implementadas por voce. 

1 var agora = 'teste minusculo'; 

2 

3 console.log( Agora ); // -> ReferenceError: Agora is not defined 

4 console.log( agora ); // -> 'teste minusculo' 

Nesse codigo acima, quando testado no Devtools do Chrome, por exemplo, tera como resultado os 
valores na frente da seta - >. 


Veremos como comentar nosso codigo agora. 
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"Rodinhas", digo f Comentarios no Codigo 


Existe uma grande discussao de ate que ponto e interessante um codigo muito comentado. Uns 
defendem dizendo que tal pratica ajuda a esclarecer o que esta ali feito, ajudando no futuro 
quando voce revisitar tal segao, mas por outro lado, o lado pratico, vemos que muito comentario 
simplesmente quebra o fluxo de leitura do codigo, fazendo com que voce tenha que ficar saltando 
entre todos os textos, ou tendo que ler centenas/milhares de linhas a mais do que o necessario. 
Sem contar que quando o codigo e atualizado, o comentario tambem deve ser, e um comentario 
desatualizado e infmitas vezes pior do que a falta do mesmo. 

Pense comigo, o que estamos fazendo ja nao e escrever em uma linguagem? Tudo bem, eu sei que 
a mesma e diferente da nossa linguagem usada para comunicagao interpessoal, porem, ela por si so 
deve ser auto-explicavel. Como conseguir isso? Nomeando suas fungoes de forma inteligente por 
exemplo, definindo no nome exatamente o que ela faz. E ai vem outra dica, codigo modular e vital 
para o sucesso de um programa. E para ter algo modular, esse algo deve fazer uma, e apenas uma 
tarefa. Conseguindo deixar um pedago isolado de codigo fazendo apenas uma coisa, sera mais facil 
nomear essa coisa, fazendo com que o nome ja se auto-explique. 

Outra forma e criar uma documentagao para seu codigo separado do mesmo, para evetuais consultas. 
Isso e algo bem elegante, diga-se de passagem. 

Voce vai me dizer: “Cara, voce nao acha que esta pegando pesado demais nao?! Nem me mostrou 
codigo e ja esta me mandando modularizar?!” 

Ai meu amigo que e a parte boa! Sendo modular, voce tera que fazer menos coisas! E assim ira ficar 
mais facil desde o inicio da sua vida de programador =) 




E muito importante comegar a trabalhar as ideias na sua cabega antes de serem implemen- 
tadas. O conceito e tao importante quanto a pratica, para quem quer realmente dominar 
o que esta fazendo. E precisamos primeiro tentar criar algo, e depois de varias tentativas e 
erros, iremos conseguir fazer tal coisa da forma mais correta. 


Voltando para os comentarios, as duas formas que temos de inseri-los nos nossos codigos sao: 

• Usando duas barras: // 

• Usando /* */ 


Vamos ver um exemplo: 
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1 /* Essa parte do meu codigo e comentada 

2 e com esse sinal eu posso fazer comentarios 

3 em varias linhas... 

4 */ 

5 var valorX = 13; 

6 

7 // Com esse simbolo, o comentario fica restrito a esta linha 

O O termo do titulo dessa segao, rodinhas, se refere as rodinhas quando estamos aprendendo 
a andar de bicicleta. No inicio, sao super importantes, mas depois que aprendemos a andar, 
nao precisamos mais delas. Usaremos comentarios nos nossos codigos para fins didaticos, 
mas os mesmos devem ser usados de forma muito escassa, pois de fato nao sao necessarios. 


“Se voce precisa explicar muito detalhadamente alguma parte do seu codigo, e porque 
algo ali nao esta muito correto...” 

• Proverbio Chines 

Como Escrever Meu Codigo 

Ao longo do livro, voce ira aprender de forma pratica as melhores praticas de escrita de codigo, mas 
inicialmente voce apenas precisa saber que seu codigo JavaScript pode conter qualquer quantidade 
de espaqos em branco entre os sinais delimitadores do programa e, por conseguinte, tambem ignora 
quebra de linhas. 

1 // codigo valido 

2 var vazio = 'muito espapo vazio aqui' ; 




Tome cuidado com as quebras de linhas, pois como veremos no fim deste capitulo, em 
determinadas situagoes, o seu codigo pode ter um ponto e virgula (;) adicionado pela 
propria linguagem, para prevengao de erros, porem que de fato ira gerar outros inesperados 
(mas que agora sao esperados pois eu te falei que vao acontecer =P). 


Para que isso nao acontega, tome cuidado com as quebras de linhas e com a omissao do 
ponto e virgula. Por favor, seja caprichoso com seu codigo, nao e porque voce pode fazer 
algo que voce deve fazer. 
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Sempre use Ponto e Vfrgula ; 

Ao final de suas instrugoes, voce tem a possibilidade de omitir o ponto e virgula (;), simbolo esse 
que mostra que uma instrugao terminou. 

O problema e que, como falado anteriormente, isso pode gerar varios erros (in)esperados. Mas fica 
a seu criterio, pra que facilitar se podemos complicar, ne?! 

Cartorio JavaScript 

Sim, aqui iremos falar da parte mais “pesada” desse capitulo, que foi bem leve, entao de fato essa e a 
parte menos leve. Qual parte e essa? Na verdade sao duas: identificadores e palavras reservadas. 

Identificadores 

Um identificador nada mais e do que um nome que usamos para chamar nossas variaveis e fungoes. 
Sim, iremos registrar o seu nome na certidao, ou no programa como queira, para que futuramente 
quando esses meninos e meninas crescerem ainda nos lembremos deles e eles de nos. 

Temos apenas algumas restrigoes para criar nossos identificadores, que sao elas: 

• Um identificador deve comegar com alguma letra, $ ou _ (underscore); 

• Numeros so sao permitidos apos o primeiro caractere estar de acordo com a regra anterior. 

Exemplos de nomes validos: carro, _teste, v8, SnomeValido. 

Palavras Reservadas 

Essas palavras sao as que ja estao definidas na linguagem, portanto apenas as usaremos. Confira 
abaixo algumas destas palavras: 

break 

case catch continue 
debugger default delete do 
else 

finally for function 
if in instanceof 
new 

return 

switch 

this throw try typeof 
var void 
while with 
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Na ECMAScript 5 temos mais palavras reservadas para uso futuro em novas implementagoes do 
padrao, que sao: 

1 class 

2 enum export extends 

3 import 

4 super 

No strict mode (modo estrito da linguagem, veremos futuramente do que se trata), temos mais 
algumas palavras reservadas para futuras implementagoes 

1 implements interface 

2 let 

3 package private protected public 

4 static 

5 yield 

Veja mais sobre palavras reservadas aqui 9 . 


Conclusao 

Neste capitulo nos aprendemos: 

• que JavaScript usa o padrao Unicode para seus caracteres; 

• que JavaScript diferencia letras maiusculas de minusculas; 

• maneiras de comentar, e por que evitar comentar; 

• que devemos sempre usar ponto e virgula (;); 

• como criar identificadores e como usar os existentes (palavras reservadas). 


9 https://deveIoper.moziIla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words 
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O titulo deste capitulo e uma representagao dos tres assuntos que iremos aprender: Valores, Tipos 
e Operadores. 

Na primeira parte, iremos ver sobre: 

1. Tipos de Dados 

2. Tipo Number 

3. Operadores Matematicos 

4. Numeros Especiais 

5. Strings 

Tipos de Dados 

O que fazemos programando computadores e basicamente manipular dados. No JavaScript, chama- 
mos esses dados de valores. Estes valores sao divididos em dois tipos: 
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• Tipos Primitivos 

- number (numeros) 

- string (sequencia de caracteres/texto) 

- boolean (booleanos ou valores de verdade) 

- Tipos Especiais: null (nulo) e undefined (indefinido) 

Todos os valores em JavaScript diferentes dos citados acima, sao pertencentes ao tipo ob ject (objeto). 
Vejamos quais sao eles: 

• Tipos de Objetos 

- arrays (vetores) 

- fungoes 

- Date (data) 

- RegExp (expressoes regulares) 

- Error 


Bom, agora que vimos teoricamente os tipos de dados em JavaScript, vamos perceber tudo isso de 
forma real. Para isso, voce devera abrir o console do seu navegador (no Google Chrome voce pode 
usar o atalho Ctrl shift j. 

Dentro da segao console existente nas ferramentas do desenvolvedor, voce devera digitar os 
comandos abaixo, para perceber que tudo isso que te falei ali em cima e verdade. O resultado 
esperado esta indicado na frente da seta ->. Caso o resultado nao seja o que voce conseguiu, 
certifique-se de ter digitado corretamente o codigo. 

Ah, ja ia me esquecendo... DigiteTODO o codigo, nao copie apenas!!! Isso sera muito importante 
para a memorizagao e internalizagao dos conceitos. 

ps: Nao acredite em meus resultados, faga todos os testes! =) 




Quando estamos dentro do console, a utilizagao do comando console. log() e desneces- 
saria para visualizar o resultado de uma instrugao, pois o resultado da operagao sempre e 
retornado. 


Vamos utilizar o console diretamente apenas para codigos curtos, pois para codigos maiores, 
iremos roda-los atraves de nossa pagina html, e ai o comando console, log() sera de 
grande utilidade. 
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/* verificagao de tipos primitivos */ 
typeof 13 // tipo number 
// -> "number " 

typeof "javascript furtivo" // t ipo string 

// -> "string" 

typeof true // t ipo boolean 

// -> "boolean" 

/* tipos primitivos especiais */ 
var semValor = null; // t ipo null 
typeof semValor 
// -> "object" 

var semAtribuir; // t ipo undefined 
typeof semAtribuir 
// -> "undefined" 

Olhando o codigo acima, mais precisamente na parte de tipos primitivos especiais, voce pode 
perceber que o tipo null na verdade e um object. Bom, mas por que isso? 

Essa peculiaridade do JavaScript na verdade e um “erro” dos primoridios da linguagem que foi 
herdado pela ECMAScript. Teremos um topico especifico mais a frente para explicar essa questao. 

Vamos ver agora no nosso console os tipos existentes de objetos. 

/* Tipos de Objeto */ 

// objeto do tipo array (vetor) 

var guitarras = [ 'ibanez', 'music man', 'suhr' ]; 
typeof guitarras; // -> "object" 

// objeto do tipo function 

var soma = function( valorl, valor2 ) { return valorl + valor2; } 
typeof soma; // -> "function" 

// objeto do tipo Date 
var agora = new Date(); 
typeof agora; // -> "object" 

// objeto do tipo RegExp 
var minhaRegExp = /padrao/; 
typeof minhaRegExp; // -> "object" 
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19 // objeto do tipo Error 

20 var perigo = new Error( 'Alguma coisa deu errado!' ); 

21 typeof perigo; // -> "object" 

Muito bom! Agora ja conhecemos todos os tipos de dados do JavaScript! Voce pode parar um pouco 
para respirar e beber uma agua, pois a partir de agora iremos aprofundar um pouco em cada tipo 
primitivo de dados que acabamos de ver. Os tipos de objetos sao mais complexos, e por isso cada um 
tera um livro proprio (no minimo)... 


Number 

Representamos numeros no JavaScript da mesma forma que escrevemos no nosso dia a dia. var 
numero = 13 e a forma que dizemos no JavaScript que a variavel numero receceu o valor 13. 

Numeros fracionarios sao representados com um ponto, ficando assim a representagao: var numero 
-1.3. 

Quando tivermos trabalhando com um numero muito grande ou muito pequeno, usamos notagao 
cientifica atraves da letra e, ficando nosso codigo, no caso, assim: 1,313el3 que e igual a 1.313 x 
10 13 . 

Calculos com numeros inteiros menores que 9 quadrilhoes sao garantidos de sempre serem precisos, 
porem nao se pode dizer o mesmo para numeros fracionarios, que devem ser tratados como 
aproximagoes. 

Operadores e Operates 

Agora que conhecemos um pouco mais sobre os numeros no JavaScript, vamos aprender a utilizar 
alguns operadores para entao fazer alguns calculos com estes numeros. 

Temos os 4 operadores matematicos basicos representados no JavaScript da seguinte forma: 

• +: efetua a adigao de dois numeros (ou concatenagao, no caso de strings); 

• -: efetua a subtragao de dois numeros; 

• *: efetua a multiplicagao de dois numeros; 

• /: efetua a divisao de dois numeros; 

• %: efetua a divisao entre dois numeros, e retorna o resto da divisao. 

Agora que ja conhecemos os numeros e operadores, vamos brincar um pouco no console. Digite as 
operagoes abaixo e confira se o resultado e o mesmo do indicado no comentario. 
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1.3 + 1.8 // -> 3.1 

1.3 - 1.17 // -> 0.13000000000000012 

1.3 * 10 // -> 13 

13 / 2 // -> 6.5 

13 % 2 // -> 1 

Numeros Especiais 

Temos tres tipos de numeros que nao se comportam como numeros. Infinity, - Infinity e NaN. 
Os dois primeiros sao gerados quando tentamos dividir algum mimero por zero, e o outro, Not a 
Number (NaN), surge quando ha uma coergao de tipo de string para number, no caso, mal sucedida, 
pois a string nao pode ser convertida em um mimero defato. 

Vamos ver como surgem estes numeros! De volta ao console! =) 

// criando um numero atraves do objeto Number 

var test = Number( 'treze' ); 

test // -> NaN 

typeof test // -> "number" 

13 / 0 // -> Infinity 

-13 / 0 // -> -Infinity 

ps: Uma particularidade do NaN e que ele e o unico valor em JavaScript que nao e igual a ele mesmo. 
Como verificar isso? A melhor forma para saber se uma variavel esta com valor NaN e testando se 
ela e igual a ela mesmo (ou diferente). 

Se voce comparar a variavel A com ela mesmo e o resultado for false, logo, A e igual a NaN. Vamos 
dar uma olhada mais de perto: 

var A = NaN; 

A == A; // -> false 
A != A; // -> true 

Voce poderia tambem verificar se uma variavel esta com o valor NaN usando o metodo isNaN(), 
porem o mesmo apresenta alguns comportamentos inesperados por fazer coergao dos valores para 
o tipo number. Veja mais aqui 10 . 

10 https://gist.github.com/kitcambridge/1086528 



1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

21 

22 


O Valor dos Tipos de Operadores - Parte 


28 


Strings 

Este e o tipo de dados basico usado para representagao de texto. Para o programa identificar uma 
string, tal deve estar contida entre aspas duplas ou simples, assim: 

• "isso e uma string" e 

• 'isso tambem e uma string' 

ps: Geralmente, usamos aspas simples no JavaScript e aspas duplas no HTML. 

Voce pode colocar tudo dentro de uma string, mas alguns caracteres precisam ser colocados com 
uma certa atengao, como aspas, quebras de linha, tabulagao entre outros, e toda a string deve ser 
escrita como uma simples expressao, apesar de poder ser escrita em varias linhas de codigo, como 
sera demonstrado logo mais. 

Para fazer o escape dos caracteres especiais, utilizamos o simbolo da barra invertida \. Esse sinal nos 
diz que temos algum caractere com significado especial na frase. 

Vamos praticar um pouco essa “teoria das cordas”. 
var 

frase01 = 'Este e o paragrafo inicial... ' , 

frase02 = "... complementado por este trecho.", 

frase03 = ' \nA partir daqui comega a ficar interessante... ' , 

frase04 = '\tagora com tabulagao, e YaspasV tambem', 

texto = frase01 + frase02 + frase03 + frase04; 

texto; 

/* 

-> "Este e o paragrafo inicial . complementado por este trecho. 

A partir daqui comega a ficar interessante... agora com tabulagao, e 'aspas' tamb\ 

em" 

*/ 

// Para escrever o mesmo texto acima como 
// uma sentenga unica, fariamos assim: 
var texto2 = 'Este e o paragrafo inicial...\ 

... complementado por este trecho.\ 

\nA partir daqui comega a ficar interessante...\ 

\tagora com tabulagao, e YaspasV tambem'; 


texto2; 
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ps:0 caracter \ quando colocado no fim da linha, permite que voce continue a string de outra linha. 
Isso e util para formatagao do codigo, melhorando a sua legibilidade. Use a forma que for mais 
conveniente e agradavel para voce. 

Vamos encerrar esta primeira etapa por aqui, para que nao fique muita informagao de uma so vez. 
No proximo capitulo iremos ver mais sobre operadores, booleanos, coergao de tipo e mais algumas 
coisas. 
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Continuando o ultimo capitulo onde falavamos sobre valores, tipos e operadores, veja o que sera 
visto neste capitulo logo abaixo: 

1. Valores Booleanos 

2. Valores Truthy e Falsy 

3. Truques com o Operador ! 

4. Cuidado com a Falsidade! 

5. Valores undefined 

6. Operadores Unarios 

7. Operadores de Incremento 

8. Operadores de Comparagao 

9. Coergao (ou conversao) de Tipo 

10. Como Evitar a Coergao de Tipo 

11. Operadores Logicos 

12. Curiosidades sobre os Operadores Logicos 

13. Operador Ternario 

14. Regras de Precedencia 
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Valores Booleanos 

Esse tipo de dado, boolean, e bem especifico, tendo apenas dois valores possiveis, true ou false 
(verdadeiro ou falso). Conseguimos obter estes valores atraves de operagoes de comparagao (x e 
maior que y ? A resposta e sempre sim ou nao, verdadeiro ou falso no caso) e atraves de um “truque” 
utilizando o operador unario ! (mais sobre operadores unarios e comparagoes adiante). 

Este operador ! (negagao) inverte o valor passado a ele para um valor booleano oposto ao original. 
Vou explicar melhor, acompanhe comigo: 

Quando aplicamos o operador ! a uma variavel que tenha realmente um valor consideravel, 
obtemos o valor false como retorno desta operagao. Mas para ficar mais claro o que e um valor 
consideravel, vou te explicar o que e um valor descartavel. 

Valores Truthy e Falsy 

O Agora voce ja precisa ter os conceitos de valor, tipo e operador em JavaScript bem 
consolidados. Faga um exercicio mental de definir para voce mesmo o que cada um e. 

Todos os tipos de valores em JavaScript tern, intrinsicamente (em sua essencia), um respectivo valor 
booleano associado. Estes valores sao claramente perceptiveis quando fazemos comparagoes entre 
valores e quando utilizamos o operador unario de negagao !. 

Valores falsy (falsos) sao os que tern em sua essencia o valor booleano false. Estes valores sao: 


• 0 (zero) 

• "" (string vazia) 

• null 

• undefined 

• NaN 

Todos os outros valores em JavaScript sao considerados truthy (verdadeiros). Alguns valores truthy 
peculiares sao: 

• "0" (zero como string) 

• "false" (false como string) 

• function() {} (fungoes vazias) 

• [ ] (arrays vazios) 

• {} (objetos vazios) 
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Truques com o Operador ! 

Agora que sabemos exatamente quais valores booleanos cada valor do JavaScript carrega, podemos 
tranquilamente e conscientemente utilizar o operador ! para obter o valor contrario do natural do 
valor em operagao. Vamos aos exemplos, e portanto, ao console!: 


false // 

0 // 

// 

NaN // 

"0" // 

"false" // 

function() {} // 

0 // 


true 

true 

true 

true 

false 

false 

false 

false 


Um modo interessante de saber qual e o valor truthy ou falsy de um valor e negando-o duas vezes 
com o operador !. Sim, e como na Matematica, -1 x -1 = 1. Entao temos que: 


! false // 

! NaN // 

!{} 

! function () {} // 


false 

false 

true 

true 


Cuidado com a Falsidade! 

Iremos ver ainda neste capitulo como comparar valores atraves dos operadores de comparagao, mas 
e importantissimo que eu lhe explique mais uma ultima coisa sobre os valores falsy. 

As regras de comparagao entre estes valores e um pouco nao-intuitiva, logo ter o conhecimento dos 
valores esperados em determinados casos e crucial na hora de um eventual bug. Vamos ver quais 
sao essas peculiaridades. 

false, 0 e "" 

Quando comparamos dois destes tres valores utilizando o operador ==, o resultado e sempre true. 
Vamos testar no console o codigo abaixo: 

O OBS: Quando utilizamos o console, podemos omitir o sinal ; (ponto e virgula) no fim das 
expressoes, pois estamos fazendo apenas um teste rapido, porem no seu codigo JavaScript 
de fato, sempre utilize o ponto e virgula!!! 
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1 false == 0 // -> true 

2 false == "" // -> true 

3 0 ==""//-> true 

nul1 e undefined 

Os valores null e undefined somente sao equivalentes a eles mesmos. Vejamos: 

1 null == false // -> false 

2 null == null // -> true 

3 undefined == false // -> false 

4 undefined == undefined // -> true 

5 undefined == null // -> true 

O ultimo valor falsy que temos para citar e o NaN, porem este ja foi abordado no capitulo anterior, e 
sabemos que e o unico tipo de dado em JavaScript que nao e igual a ele mesmo. 


Valores Undefined 

Temos definidos no JavaScript dois tipos indefmidos, usados para representar a falta de representa- 
tividade de algum dado. 

ps: O paradoxo da frase anterior e apenas uma brincadeira, pois a definigao e muito simples, e vou 
lhe explicar agora! =) 

Como ja foi explicado no capitulo anterior, na realidade apenas undefined e de fato um tipo primitivo 
de dado, nul 1 e um tipo de objeto, quando fazemos sua inspegao no console podemos verificar isso. 

O valor undefined aparece quando declaramos uma variavel e nao atribuimos a ela nenhum valor. 
Ja o valor nul 1 e um valor que deve ser atribuido a uma variavel, e representa a ausencia de valor 
nesta variavel. 

Confira os exemplos no capitulo anterior na segao tipos de dados para fixar esta diferenga. 

Operadores Unarios 

Alguns operadores sao palavras ao inves de simbolos. Utilizamos um destes operadores muito nos 
exemplos do capitulo anterior, o operador typeof, que produz uma string identificando o tipo do 
valor do elemento que voce passou a ele. 

ps: Para ver o operador typeof em funcionamento, volte no capitulo anterior onde voce encontrara 
varios exemplos da utilizagao dele. 
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Outros operadores unarios sao delete e void. Para este material nao se tornar muito extenso, voce 
pode procurar o que cada um faz aqui(delete) 11 e aqui(void) 12 . 




Operadores unarios utilizam um valor para fazer seu trabalho, operadores binarios e 
ternarios, dois e tres valores respectivamente. 


Operadores de Incremento 

Temos dois tipos de operadores de incremento: os utilizados para numeros e os utilizados para strings 
e numeros. 

Incrementando Numeros 

Os operadores ++ e -- sao utilizados para incrementar variaveis/valores do tipo number. Sao 
operadores frequentemente utilizados para auxiliar na estrutura logica do programa, aumentando 
ou diminuindo em uma unidade o valor da variavel. A partir do proximo capitulo iremos comegar 
a focar em pedagos de codigo maiores, e assim iniciar a criagao de mini-programas, para depois 
chegarmos no nosso objeto de juntar todas essas pegas para criarmos o que quisermos. Por agora, 
vamos ver no console como funcionam estes operadores. 

Uma ultima informagao. Estes operadores podem ser utilizados antes ou depois da variavel, sendo 
assim denominados operadores de pre-incremento ou pos-incremento. Qual a diferenga entre 
eles? A diferenga e que quando utilizamos o operador antes da variavel, ela sera alterada antes da 
execugao do codigo, entao o valor processado para a operagao atual sera o ja modificado, e quando 
usamos o operador depois da variavel, essa alteragao sera percebida apenas depois quando esta 
variavel for solicitada. 

Vamos aos testes! 

1 var total = 0; 

2 total++ // -> 0 (valor foi alterado, mas sera percebido na prdxima operagao) 

3 total // -> i 

4 ++total //-> 2 

5 --total // -> i 

6 total-- // -> i 

7 total // -> 0 


11 https://developer.moziUa.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#delete 

12 https://developer.moziUa.org/pt-BR/docs/JavaScript/Guide/Expressions_and_Operators#void 
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Incrementando Numeros e Strings 

Estes operadores serao utilizados sempre por voce! Sao realmente MUITO importantes e elegantes, 
diga-se de passagem. A fungao deles e adicionar mais conteudo a antiga variavel mas sem precisar 
declarar isso de forma verbosa (escrevendo mais do que se poderia/deveria). De fato, estes operadores 
operam e atribuem o valor para a mesma variavel. Ele pode ser utilizado para somar, subtrair, 
multiplicar e dividir numeros, ou para concatenar novas strings em variaveis que content valores 
deste tipo. 

Vamos dar uma olhada como estes operadores trabalham. 

// somando numeros 
var resultado = 7 
resultado += 6 // -> 13 

// concatenando strings 
var meuNome = 'Eric' 

meuNome += ' Douglas' // -> "Eric Douglas" 

// subtraindo numeros 
resultado -= 6 // -> 7 

// multipiicando numeros 
resultado *= 3 //-> 21 

// dividindo numeros 
resultado /= 2 // -> 10.5 

// resto da divisao de numeros 
resultado %= 2 // -> 0.5 

// urn exemplo de como somar na mesma variavel 
// sem usar estes operadores 
resultado = resultado + 0.8 // -> 1.3 

Operadores de Comparagao 

Operadores de comparagao sao um dos tipos de operadores binarios, que no caso, utilizam dois 
valores para efetuarem a operagao. Os operadores de comparagao sempre retornam um booleano, 
dizendo se a comparagao e verdadeira ou falsa. Sao tambem utilizados na estrutura logica do 
programa. 

Vamos conhecer estes operadores! 
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< : menor que - verifica se o numero da esquerda e menor que o numero/string da direita <= : menor 
ou igual que - verifica se o numero da esquerda e menor ou igual ao numero/string da direita > : 
maior que - verifica se o numero da esquerda e maior que o numero/string da direita >= : maior ou 
igual que - verifica se o numero da esquerda e maior ou igual ao numero/string da direita 

Cuidado ao Comparar Strings! 

A maneira de comparar strings pode nao ser muito intuitiva, pois qualquer letra maiuscula sera 
sempre menor que uma letra minuscula. 

Vamos confirmar toda essa teoria agora. Ja sabe ne? Console! =) 

1 13 < 26 // -> true 

2 

3 'treze' < 'Vinte seis' // -> false *preste atertgao aqui* 

4 

5 var treze =13 

6 treze <= 13 // -> true 

7 

8 26 > 13 // -> true 

9 'vinte seis' > 'Treze' // -> true 

Comparadores de Igualdade 

Alem dos comparadores mostrados acima, tambem temos os comparadores de igualdade, que sao 
constantemente usados em nossos codigos, porem tern algumas peculiaridades que se voce nao 
souber, certamente ira gerar erros nos seus programas. Mas fique tranquilo, e bem simples de 
entender a diferenga entre eles, e irei lhe provar agora! Primeiro, vamos conhecer quais sao estes 
outros operadores. 

==: testa igualdade ! =: testa desigualdade ===: testa igualdade de forma restrita ! ==: testa desigual- 
dade de forma restrita 

A grande diferenga entre um operador e outro e que a primeira dupla (== e ! =) ao comparar os valores, 
caso eles nao sejam do mesmo tipo, procedem com uma particularidade do JavaScript chamada de 
Coergao de Tipo (ou conversao de tipo), e isso pode gerar muita dor de cabega para voce. Serio! 

Irei explicar sobre coergao de tipo no proximo topico, mas antes vamos tentar entender pelo codigo, 
de forma pratica, como cada operador trabalha, e depois irei explicar de forma teorica e encerrar o 
assunto. Vamos la! 
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1 '13' == 13 // -> true 

2 '13' !— 13 // -> false 

3 

4 '13' = 13 // _> false 

5 '13' !== 13 // -> true 




Vale ressaltar mais uma vez... Entender o que esta acontecendo no codigo e super 
importante, e muitas vezes temos que realmente ler varias vezes e/ou flcar varios minutos 
para conseguir entende-lo. E sim, isso e algo super importante, nao tenha “do” de investir 
tempo nisso! 


Neste proximo topico irei lhe explicar o que aconteceu no codigo anterior, entao, vamos para o 
proximo! 

Coergao de Tipos 

O nome assusta um pouco ne?! E de fato devemos ter cuidado com isso pois surgem muitas bugs no 
seu codigo a partir deste esforqo que o JavaScript faz para efetuar todas as instruqoes recebidas. 

Sempre que voce usa um operador no JavaScript (no caso entao, faz uma operaqao), voce ira receber 
um valor de retorno, nunca um erro, mesmo que voce tente trabalhar com tipos diferentes de dados. 

A coergao de tipos (ou conversao de tipos) e justamente isso! Quando tentamos fazer operagoes 
com tipos de dados diferentes, o JavaScript nos agracia com a conversao de um dos valores para 
algum outro tipo... So que o grande e terrivel problema disso e que dificilmente voce consegue prever 
qual sera este novo valor, pois as regras para tal conversao nao sao intuitivas, o que pode causar 
alguma(s) falha(s) em sua aplicagao. 

Como Evitar a Coergao de Tipos 

Para evitar toda essa preocupagao, voce deve usar os operadores === e ! ==, que fazem a mesma 
verificagao de igualdade que seus “primos”, porem NAO fazem coergao de tipos! 

ps: Por questoes de seguranga, sempre opte por usar os comparadores de igualdade restrita. 
Parabens! Agora voce finalmente sabe o que e essa bendita coergao de tipos e como evita-la! lol 


Quando algo que nao e obviamente um numero e convertido para tal, o valor dessa 
operagao e convertido para NaN. Portanto, sempre que encontrar NaN em seu codigo, procure 
por coergoes de tipo acidentais. 
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Operadores Logicos 

Sempre que pensamos na parte logica do programa devemos pensar em valores booleanos, e para 
gerar estes valores booleanos a partir dos valores que nossas variaveis carregam, iremos usar os 
operadores logicos, que sao um tipo de operador binario, ou seja, necessitam de dois valores para 
geragao de um terceiro. 

ps: O operador ! e um operador logico pois retorna um valor booleano, porem e uma excegao a regra 
por ser um operador unario. 

Conhega agora os operadores logicos: 

• && : este operador e chamado de “E” logico 

• I I : este operador e chamado de “OU” logico 

• ! : este operador e chamado de “NAO” logico 

&& E logico 

Este operador logico e binario retorna true se ambos os valores (ou operandos) forem verdadeiros. 
Isso no caso sera utilizado em estruturas condicionais, assunto que iremos abordar no proximo 
capitulo. Por enquanto voce so precisa saber disso. 

I | OU logico 

Este operador logico e binario retorna true se um dos valores forem verdadeiros. 

! NAO logico 

Como ja vimos anteriormente, este operador transforma o operando em booleano, porem com a 
peculiaridade de inverter seu valor truthy/falsy para um booleano de fato. 

Curiosidades sobre os Operadores Logicos 

Quando utilizamos os operadores logicos fora de estruturas condicionais, eles tern uma forma 
peculiar de trabalhar, que vale muito a pena ser entendida para que possamos deixar nosso codigo 
mais elegante e conciso. 

Sempre que usamos && e I I, eles convertem o valor do lado esquerdo para um booleano, para saberem 
qual valor sera retornado dessa operagao. 

Entendendo o Operador | | 

O operador I I retorna o valor da sua esquerda quando ele pode ser convertido para true, ou seja, 
quando seu valor e do tipo truthy, e sempre retorna o valor da direita caso contrario, independente 
de qual valor seja esse, ate mesmo outro valor falsy. Veja isso na pratica. 
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var esquerda -"//-> valor do tipo falsy 
var direita = 13 // -> valor do tipo truthy 

esquerda I I direita // -> 13 

var direita = 0 // -> agora vamos atribuir este valor falsy na direita e ver o qu\ 
e acontece 

esquerda I I direita // -> 0 

// Agora vamos deixar ambos os valores truthy 

esquerda =13 
direita = 31 

esquerda I I direita // -> 13 

Viram? Mesmo o valor da direita sendo falsy, ele e retornado pois a regra e: “se o valor da esquerda 
for falsy, retorne o da direita sem nem ver qual e”. E depois, quando alteramos o valor da esquerda 
para um valor truthy, ele foi retornado. Legal ne?! =) 

Vamos ver agora o outro operador. 

Entendendo o Operador && 

Este operador faz o contrario. Quando o valor da esquerda e falsy, ele e retornado, independente de 
qual valor seja o da sua direita. E o valor da direita sempre sera retornado quando o da esquerda 
for truthy, mesmo que este valor da direita seja falsy. Vamos ver o codigo para ficar mais claro. 

var esquerda = NaN // -> valor do tipo falsy 
var direita = 13 // -> valor do tipo truthy 

esquerda && direita // -> NaN 

var esquerda = 31 // agora vamos atribuir um valor truthy na esquerda e ver o que\ 
acontece 

esquerda && direita // -> 13 

// Agora vamos deixar o valor da direita falsy 

direita = ' ' 

esquerda && direita // -> '' 
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Muito bom! Estamos quase terminando, e a essa altura voce ja sabe de varias peculiaridades do 
JavaScript! Vamos em frente =) 

Operador Ternario 

Este operador e de fato muito poderoso, pois evita verbosidade no codigo, deixando-o entao bem 
mais elegante. 

Ele e chamado operador ternario pois envolve tres pegas em sua operagao. Vamos analisa-lo abaixo. 
Primeiramente irei mostra-lo em funcionamento e depois irei explica-lo. 

var usuario = '' 

// usando o operador ternario 

usuario ? usuario : 'convidado' // -> "convidado" 

// atribuindo um valor a variavel usuario 
usuario = 'Eric' 

// usando o operador ternario novamente 
usuario ? usuario : 'convidado' // -> "Eric" 

Como funciona isso? Lhe explico ja! 

Primeiramente criamos a variavel usuario e atribuimos uma string vazia a ela. Ou seja, um valor 
falsy. Apos isso, usamos o operador ternario que funciona da seguinte forma: 

1. Indicamos a variavel ou condigao que deve ser avaliada. No caso, usamos a variavel usuario. 

2. Este valor a ser analisado sera transformado em um booleano, a partir de seu valor truthy/false 
(esta vendo a importancia da teoria?!) 

3. Caso seu valor seja truthy, entao o operador retorna a instrugao apos o sinal ?. Caso o valor 
seja falsy, o valor retornado sera o que esta apos o sinal :. 

4. Voce pode retornar qualquer expressao JavaScript como valor de retorno dessa avaliagao, veja 
outro exemplo: 

var cozinheiro = false 

cozinheiro ? { receitas : [ ‘carnes’,’doces’/tortas’ 

} ] console.log(‘mexido e olhe la!’) // -> “mexido e olhe la!” 

Entendeu como funciona? Esse operador e muito legal! =D 
ps: Altere o valor de cozinheiro para true e veja o que acontece! 


O Valor dos Tipos de Operadores - Parte 2 


Regras de Precedencia 

Para saber qual operagao ira ocorrer primeiro, voce precisa conhecer a ordem de precedencia dos 
operadores. Confira abaixo a lista na ordem do maior (no topo) para o menor (embaixo) operador 
em relagao a sua precedencia. 

• pre/pos incremento/decremento 

• ! altera valor booleano 

• typeof, determina o tipo do operando 

• *, / e % multiplica, divide e resto 

• + e - soma e subtrai 

• + concatena strings 

• <,<=,> e >= comparagao de ordem numerica 

• <,<=,> e >= comparagao de ordem alfabetica 

• == teste de igualdade 

• ! = teste de desigualdade 

• === teste de igualdade restrita 

• ! == teste de desigualdade restrita 

• && E logico 

• I I OU logico 

• ?: operador ternario 

• = atribuigao a variavel ou propriedade 

• *=, /=, %=, += e -= operagao e atribuigao 

Veja mais sobre regras de precendencia aqui 13 

Conclusao 

Finalmente terminamos! Bom, esse foi o maior capitulo ate agora, e com certeza foi o mais 
interessante, por termos visto varias peculiaridades da linguagem JavaScript e termos sedimentado 
uma base solida para os capitulos seguintes. 

13 https://deveIoper.moziIla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence 
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Vamos continuar com nossa longa jornada, rumo a maestria em JavaScript! Neste capitulo falaremos 
exclusivamente sobre expressoes. Confira um resumo do que sera abordado: 

1. O que e uma Expressao? 

2. Expressoes Basicas 

3. Expressoes “Complexas” 

• Expressoes de Inicializagao 

• Expressoes de Definigao 

• Expressoes para Acessar Propriedades 

• Expressoes de Invocagao 

• Expressoes de Criagao 

4. Mais Expressoes 

• Expressoes Matematicas 

• Expressoes de Relagao 

• Expressoes Logicas 

• Expressoes de Atribuigao 


1 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 


Expressoes JavaScript 


43 


O que e uma Expressao 

Expressao e um fragmento de codigo JavaScript que pode ser interpretado para produgao de um 
valor. Fazendo uma breve analogia, a expressao esta para seu programa JavaScript assim como uma 
frase esta para um texto. Um exemplo de expressao e uma atribuigao de valor a uma variavel. 

var atribui = 'e a nevoa comega a se dissipar... ' 

Podemos combinar expressoes para formar outras mais elaboradas. 

O Vimos varias expressoes no capitulo anterior, enquanto falavamos sobre os operadores. 
Todos aqueles exemplos sao otimos para o entendimento de expressoes. Na realidade, o que 
iremos ver hoje e apenas uma formalizagao do estudo passado, apenas nomeando coisas 
que ja sabemos intuitivamente. 

Aproveite pois o capitulo de hoje sera bem leve, mas Pique sabendo que nossa base para 
criagao de programas JavaScript esta quase pronta, e em breve a diversao ira comegar de 
fato ;D 


Expressoes Basicas 

Esse tipo de expressoes sao assim denominadas pois nao incluem outras expressoes, ou seja, sao o 
menor fragmento possivel do nosso codigo. Vejamos alguns exemplos: 


// Expressoes Literals 
13 

"JavaScript Furtivo" 

// Algumas Palavras Reservadas 

true 

false 

null 


// Referencias a variaveis 
total 
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Expressoes de Inicializagao 

Essas expressoes sao muito importantes, pois nos possibilitam a criagao de objetos e arrays de forma 
literal, e isso nos da uma facilidade e praticidade muito grande na hora de tais tarefas. Veja abaixo 
a forma de se criar um objeto e array de forma literal e da forma utilizada com o auxilios de seus 
construtores (iremos conhecer mais sobre construtores futuramente). 

/* Inicializando de forma literal */ 

var meuObjeto = {}; // criado um objeto vazio 

var meuArray = []; // criado um array vazio 

/* Inicializando com Construtores */ 
var meu0bjeto2 = new Object(); 
var meuArray2 = new Array(); 

// Quando criamos objetos/arrays vazios, podemos omitir os parenteses 
var objetoVazio = new Object; 
var arrayVazio = new Array; 

Viram o quao economica e elegante e a forma literal de inicializagao de objetos e arrays? Use-a sem 
moderagao! 

Um dos motivos de enquadrarmos esta e as expressoes seguintes no campo de expressoes complexas, 
e que elas podem receber as expressoes basicas para comporem seu valor, pois obviamente, um 
objeto, um array, so sao uteis por carregarem em si valores agrupados de acordo com algum 
proposito. Alem de valores basicos, podemos tambem passar valores “complexos” para expressoes 
complexas. Traduzindo, ter arrays dentro de arrays, objetos dentro de objetos, arrays dentro de 
objetos, objetos dentro de arrays, e por ai vai... 

Vamos agora entao, dar sentido a existencia de nossos objetos e arrays! 

var estudos = { 

JavaScript: [ 

' NodeJS ' , 

1 AngularJS 1 , 

1 ExpressJS 1 , 

1 MongoDB ’ 

L 

Outros: [ ’Jade’, ’Stylus' ] 

}; 

var livros = [ 

'Padroes JavaScript', 
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13 'JavaScript: 0 Guia Definitive', 

14 '0 Melhor do JavaScript' 

15 I| 


No exemplo acima, na variavel estudos (que e um objeto, veja pelo sinal {} que abraga os demais 
valores), temos as propriedades JavaScript e Outros recebendo arrays como valores, e estes arrays 
recebem strings, por sua vez. 

No caso da variavel livros, que e um array [], ela recebe tres strings como itens de sua lista de 
valores. 

Brinque um pouco agora criando arrays e objetos de diferentes tipos, preenchidos com diversos 
valores! 

Expressoes de Definigao 

Usamos essa expressao para definir uma fungao em nosso programa. Para criarmos essa expressao 
devemos seguir os seguintes passos: 

1. Usar a palavra chave function 

2. [opcional] Dar um nome para a fungao (caso nao tenha nome, iremos chama-la de fungao 
anonima) 

3. Passar os argumentos que serao usados na fungao, que podem ser de 0 (zero) ate quantos 
voce quiser, todos colocados dentro dos parenteses () e separados por virgulas. Ex: (valorl, 
valor2, valor3) 

4. Criagao do corpo da fungao, que contera outras expressoes, que sao as tarefas que deverao ser 
feitas todas as vezes que a fungao for chamada. O corpo da fungao e delimitado por chaves { 
... mais expressoes aqui ... } 

Para chamarmos nossa fungao posteriormente, devemos ou atribui-la a uma variavel ou entao 
nomea-la. 

Veja alguns exemplos: 

1 function nomeadaQ { 

2 // outras expressoes aqui 

3 } 

4 

5 var outraFuncao = function(parametrol , parametro2) { 

6 // mais expressoes aqui 

7 } 
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Expressoes para Acessar Propriedades 

Usamos esse tipo de expressao para obter o valor de alguma propriedade/item de um objeto ou 
um array. Podemos fazer isso usando dois tipos de sintaxe diferentes, a de notagao por ponto 
(expressao.chave) ou a de notagao por colchetes (expressao['chave ']). Vamos ver com mais 
detalhes cada uma delas. 

Acessando Propriedades com ponto 

expressao.chave 

Essa forma e utilizada exclusivamente para acessar propriedades e metodos de objetos. Onde temos 
escrito expressao, iremos utilizar o nome do nosso objeto, e onde temos chave, iremos passar o nome 
da propriedade/metodo que queremos avaliar. Vamos para o console e tornar isso mais claro. 

var guitarras = { 

modelol: 'music man', 
modelo2: 'ibanez', 
modelo3: 'prs', 

cordas: [ 'elixir', 'daddario' ] 

}; 


// Se quisermos entao saber o valor do modelo2... 
guitarras.modelo2 // -> 'ibanez' 

// 0 valor do segundo item do array "cordas" 
guitarras.cordas. 2 // -> SyntaxError : Unexpected number 

Notem que tivemos um erro ao tentar acessar o segundo item da propriedade cordas! Isso se deve 
pelo motivo que para acessar itens de arrays, utilizamos outro tipo de notagao, que irei lhe explicar 
agora! 

Acessando Itens e Propriedades com Colchetes 

expressao['chave'] 

Com esse tipo de notagao podemos acessar tanto os itens de um array quanto as propriedades de um 
objeto. Onde temos o valor expressao iremos substituir pelo nome do array ou objeto, e onde temos 
chave, iremos substituir pela posigao do item (caso seja um array) ou pelo nome da propriedade, 
caso seja um objeto. Vamos agora utilizar do nosso exemplo anterior, porem acessando o objeto e o 
array com esta notagao por colchetes. 
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var guitarras = { 

modelol: 'music man', 
modelo2: 'ibanez', 
modelo3: 'prs', 

cordas: [ 'elixir', 'daddario' ] 


// Se quisermos entao saber o valor do modelo2... 
guitarras [' modelo2 ' ] // -> 'ibanez' 

// 0 valor do segundo item do array "cordas" 
guitarras.cordas[1] // -> 'daddario' 

// uma peculiaridade dessa notagao: podemos passar um valor 

// contido em uma variavel como a chave para buscar um item/propriedade 

var modeloPreferido = 'modelol'; 

guitarras[modeloPreferido] // -> 'music man' 

Dicas de "Acessibilidade" 

• Caso voce tente acessar propriedades em null e undefined, voce obtera uma excegao 
TypeError, ou seja, um erro, pois esses valores nao podem ter propriedades. 

• Caso acesse uma propriedade ou indice que nao esteja definido, o valor retornado sera 
undefined. 

• A notagao de ponto, por ser mais direta, deve ser utilizada quando ja se sabe exatamente qual 
propriedade sera acessada. 

• A notagao por colchetes permite que seja passado variaveis como valor para acesso, pois caso 
a propriedade tenha sua chave (identificador) sendo um numero, contendo espago no nome 
ou sendo uma palavra reservada de JavaScript, a unica forma de acessa-la e assim, atraves da 
notagao de colchetes, utilizando ou nao uma variavel para contenqao desse valor. 

Expressoes de Invocagao 

Essa expressao e utilizada para chamar (invocar, executar) uma fungao ou metodo. 

O Quando uma fungao esta atribuida a uma chave em um objeto, essa passa a se chamar 

metodo. 


Para usar essa expressao devemos indicar o nome da fungao que desejamos invocar seguida de 
parenteses. Caso a fungao receba argumentos, os mesmos devem ser passados dentro dos parenteses. 
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ps: Lembre-se de usar no seu codigo o ; depois de chamar a fungao! Somente omitiremos o ponto e 
virgula no console para agilizar os testes. 

Vamos ver um exemplo: 

// definindo uma fungao: expressao de definigao 
function multiplica( valorl, valor2 ) { 
return valorl * valor2; 

} 

// chamando a fungao: expressao de invocagao 
multiplica( 5, 8 ); // -> 40 
multiplica( 3, 13 ); // -> 39 

Entendendo o Processo de Invocagao 

Irei explicar sucintamente como funciona este processo, o qual sera devidamente aprofundado 
quando estivermos falando especificamente sobre fungoes. Veja quais sao as etapas: 

1. Verificagao da existencia de uma fungao (ou objeto, visto que a fungao e um tipo de objeto) 
com o nome passado. Caso nao exista tal objeto, um erro e langado. 

2. Criagao de uma lista de valores a partir dos argumentos passados, que sao avaliados para 
produzirem tais valores. 

3. Atribuigao dos valores aos respectivos parametros da fungao. 

4. Execugao do corpo da fungao. 

5. Se a fungao tiver return, esse valor sera o retornado como resultado da avaliagao da fungao. 

Expressoes de Criagao 

Sao utilizadas como uma alternativa na forma de se criar objetos. E bom ter conhecimento dessas 
expressoes, mas saiba que dificilmente voce ira utiliza-las (para arrays e objetos), pois a forma literal 
e bem mais direta. 

Nessas expressoes utilizamos as fungoes construtoras para criar novos objetos, juntamente com a 
palavra chave new (iremos estudar sobre fungoes construtoras mais a frente). 

Alguns exemplos da utilizagao dessas expressoes: 


var cestaDeCompras = new ObjectQ; 
var dataDeAgora = new Date(); 
var 1istaDeCompras = new Array(); 
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Mais Expressoes 

No ultimo capitulo ja vimos varios exemplos de expressoes que utilizam operadores. Irei deixar aqui 
indicado o nome da expressao com seus respectivos operadores, e apos vista a teoria aqui, va para o 
outro capitulo e procure as respectivas expressoes em uso. 

Os outros tipos de expressoes que temos sao: 

• Expressoes Matematicas ou Aritmeticas: 

• Expressoes Relacionais: ==, ===, !=,!==,<,>, <=, >= 

• Expressoes Logicas: &&, I I, ! 

• Expressoes de Atribuigao: +=, -=, *=, /=, %- 



